<template>
  <div>
    <el-dialog :title="addInfo.isAdd ? '添加角色' : '编辑角色'" :visible.sync="addInfo.isShow" :before-close="cancel" center>
      <el-form :model="roleForm" :rules="rules" ref="roleForm">
        <el-form-item label="角色名称" :label-width="formLabelWidth" prop="rolename">
          <el-input autocomplete="off" v-model="roleForm.rolename"></el-input>
        </el-form-item>
        <el-form-item label="角色权限" :label-width="formLabelWidth">
          <el-tree 
          ref="tree" 
          :data="$store.getters['menu/getMenu']" 
          show-checkbox 
          node-key="id" 
          default-expand-all
          :props="{ children: 'children', label: 'title' }" 
          check-strictly>
          </el-tree>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-switch v-model="roleForm.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1"
            :inactive-value="2"></el-switch>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button @click="confirn" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// import { mapActions } from 'vuex';
import { roleadd, roleinfo, roleedit } from '../../request/api'
export default {
  data() {
    return {
      formLabelWidth: '120px',
      //表单对象
      roleForm: {
        rolename: "", //角色名称string
        menus: "", //角色权限 (需要这种数据格式  1,2,3,4  )
        status: 1, //状态   1正常2禁用   number类型number
      },
      rules: {
        rolename: [
          { required: true, message: '请输入角色名称', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  props: ['addInfo'],
  mounted() {
    //为了减少服务器的压力，我们进行行动触发优化
    //如何优化？ 如果用户已经在其他模块调用菜单列表则本模块不进行调用，否则。本模块触发行动
    //触发菜单行动
    if (this.$store.getters['menu/getMenu'].length == 0) {
      this.$store.dispatch('menu/getMenuAction')
    }
  },
  methods: {
    reset() {
      this.roleForm = {
        rolename: "", //角色名称string
        menus: "", //角色权限 (需要这种数据格式  1,2,3,4  )
        status: 1, //状态   1正常2禁用   number类型number
      };
      this.$refs.roleForm.resetFields();//重置表单验证
      //清空树节点
      //getCheckedKeys	若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
      //setCheckedKeys	通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
      this.$refs.tree.setCheckedKeys([])//重置树形控件
    },
    cancel() {
      this.reset();
      this.$emit('cancel', false)
    },
    lookup(id) {
      roleinfo({ id }).then((res) => {
        if (res.code == 200) {
          this.roleForm = res.list;
          this.roleForm.id = id;
          this.roleForm.menus ? this.$refs.tree.setCheckedKeys(this.roleForm.menus.split(',')) : this.$refs.tree.setCheckedKeys([])
        }
      })
    },
    confirn() {
      // console.log(this.roleForm);
      this.$refs.roleForm.validate((val) => {
        if (val) {
          this.roleForm.menus = this.$refs.tree.getCheckedKeys().join(',')
          if (this.addInfo.isAdd) {
            //添加逻辑
            roleadd(this.roleForm).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.cancel();
                //重新获取列表
                this.$store.dispatch('role/getroleAction')
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg)
              }
            })
          }else{
            //编辑逻辑
            roleedit(this.roleForm).then((res)=>{
              if (res.code == 200) {
                this.cancel();
                //重新获取列表
                this.$store.dispatch('role/getroleAction')
                this.$message.success(res.msg);
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        }
      })
    }
  },
};
</script>

<style scoped>

</style>
